{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
    {{ productName }}
{% endblock %}
{% block content %}
    <link href="{% static 'css/products.css' %}" rel="stylesheet">
    <!-- 广告横幅-->
    <div class="container-fluid">
        <div class="row">
            <img class="img-responsive model-img" src="{% static 'img/products.jpg' %}">
        </div>
    </div>

    <!--主体内容-->
    <div class="container">
        <div class="row row-3">
            <!--侧边导航栏-->
            <div class="col-md-3">
                <div class="model-title">
                    产品中心
                </div>
                <div class="model-list">
                    <ul class="list-group">
                        <li class="list-group-item" id="robot">
                            <a href="{% url 'productsApp:products' 'robot' %}"> 家用机器人 </a>
                        </li>
                        <li class="list-group-item" id="monitor">
                            <a href="{% url 'productsApp:products' 'monitor' %}"> 智能监控</a>
                        </li>
                        <li class="list-group-item" id="face">
                            <a href="{% url 'productsApp:products' 'face' %}"> 人脸识别解决方案</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--产品的说明文字后和图片-->
            <div class="col-md-9">
                <div class="model-list-title">
                    {{ productName }}
                </div>
                <div class="model-details">
                    {# 从数据库里读取产品数据 #}
                    {% for product in productList %}
                        <div class="row">
                            <div class="col-md-6">
                                {% for img in product.productImgs.all %}
                                    {% if forloop.first %}
                                        <a href="#" class="thumbnail row-4">
                                            <img class="img-responsive" src="{{ img.photo.url }}">
                                        </a>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <div class="col-md-6">
                                <h3>{{ product.title|truncatechars:"20" }}</h3>
                                <p>{{ product.description|truncatechars:"150"|linebreaks}}</p>
                                <div class="thumbnail row-5">
                                    <div class="caption">
                                        <a href="{% url 'productsApp:productDetail' product.id %}" class="btn btn-primary" role="button">
                                            查看详情
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                    {#  分页内容  #}
                    {% if pageData %}
                        <div class="paging">
                            <ul id="pages" class="pagination pagination-sm pagination-xs">
                                {% if pageData.first %}
                                    <li><a href="?page=1">1</a></li>
                                {% endif %}
                                {% if pageData.left %}
                                    {% if pageData.left_has_more %}
                                        <li><span>...</span></li>
                                    {% endif %}
                                    {% for i in pageData.left %}
                                        <li><a href="?page={{i}}">{{i}}</a></li><!--单击时会将参数page的值封装到request中，后台从request中得到page变量值-->
                                    {% endfor %}
                                {% endif %}
                                <li class="active"><a href="?page={{pageData.page}}">{{pageData.page}}</a></li>
                                {% if pageData.right %}
                                    {% for i in pageData.right %}
                                        <li><a href="?page={{i}}">{{i}}</a></li>
                                    {% endfor %}
                                    {% if pageData.right_has_more %}
                                        <li><span>...</span></li>
                                    {% endif %}
                                {% endif %}
                                {% if pageData.last %}
                                    <li><a href="?page={{pageData.total_pages}}">{{pageData.total_pages}}</a></li>
                                {% endif %}
                            </ul>
                        </div>
                    {% endif %}


                </div>
            </div>
        </div>
    </div>
{% endblock %}





